<template>
	<view>
		<pagebg></pagebg>
		<view class="p-all-32">
			<view class="dp-f ai-c fs-60 h-150 pl-32">
				<image class="w-100 h-100" src="../../static/logo.png" mode=""></image><text>markrgba-css</text>
			</view>
			<view class="c-999 fs-32 pl-32">
				一款语义化的CSS基础库
			</view>
			<view class="mt-50">
				<view class="bg-f2 mt-24 dp-f ai-c fs-32 c-666 p-0-40 h-100 br-50" v-for="(r,n) in routes" :key="n" @click="open(r)">
					{{r.name}}-{{r.router}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				routes: [{
						name: '布局',
						router: 'layout'
					},
					{
						name: '文字',
						router: 'font'
					},
					{
						name: '颜色',
						router: 'color'
					},
					{
						name: '外边距',
						router: 'margin'
					},
					{
						name: '内边距',
						router: 'padding'
					},
					{
						name: '边框',
						router: 'border'
					},
					{
						name: '其它',
						router: 'other'
					},
				]
			}
		},
		onLoad() {
			window.addEventListener('message', this.handleMessage)
		},
		methods: {
			open(r) {
				this.$reRouter(r.router)
			},
			handleMessage(e) {
				console.log('来自父组件', e.data.params.path)
				if (e.data.params.path) {
					this.$Router.push({
						name: e.data.params.path
					})
				}
			}
		}
	}
</script>

<style scoped>
	.bg-f2 {
		background-color: #f2f2f2;
	}

	.bg-f2:hover {
		background-color: #e5e5e5;
	}

	.logo1 {
		height: 300rpx;
		width: 300rpx;
		transform: rotate(-45deg);
		margin-left: 60rpx;
	}

	.logo2 {
		height: 300rpx;
		width: 300rpx;
		transform: rotate(-45deg);
		margin-top: -50rpx;
		margin-left: 320rpx;
	}

	.shadow-blur {
		position: relative;
	}

	.shadow-blur::before {
		content: "";
		display: block;
		background: inherit;
		filter: blur(10rpx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 10rpx;
		left: 10rpx;
		z-index: -1;
		opacity: 0.4;
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}
</style>
